<template>
  <div class="bg" :style="{backgroundImage: 'url(' + backgroundImageURL + ')'}">
    <el-card>
      <el-form ref="form" :label-position="labelPosition" :model="form" :rules="rules" label-width="80px"
               class="login-box" style="width: 400px;">
        <h1 class="login-title">欢迎使用</h1>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder='请输入用户名（仅限字母数字）' maxlength="20" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder='请输入密码（仅限字母数字）' maxlength="20" show-password
                    show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-button type="danger" plain @click="Register('form')" style="width: 80%;">
              注册
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="danger" @click="Login('form')" style="width: 80%;">
              登录
            </el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      labelPosition: 'left',
      form: {
        username: '',
        password: ''
      },
      backgroundImageURL: require('../assets/BG.jpg'),
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          min: 1,
          max: 12,
          message: '非法长度',
          trigger: 'blur'
        }, {
          pattern: /^[A−Za-z0-9]+$/,
          trigger: 'change',
          message: '非法输入'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 1,
          max: 20,
          message: '非法长度',
          trigger: 'blur'
        }, {
          pattern: /^[A−Za-z0-9]+$/,
          trigger: 'change',
          message: '非法输入'
        }]
      }
    }
  },
  methods: {
    Register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form.username)
          console.log(this.form.password)
          // axios.post('register', {
          //   name: this.form.username,
          //   password: this.form.password
          // }).then(function(response) {
          //   this.$router.push('/main');
          //   console.log(response)
          // }).catch(function(error) {
          //   console.log(error)
          // });
        } else {
          console.log('error')
        }
      });
    },
    Login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form.username)
          console.log(this.form.password)
          this.$router.push('/main')
          // axios.post('register', {
          //   name: this.form.username,
          //   password: this.form.password
          // }).then(function(response) {
          //   this.$router.push('/main');
          //   console.log(response)
          // }).catch(function(error) {
          //   console.log(error)
          // });
        } else {
          console.log('error')
        }
      });
    }
  }
}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-repeat:no-repeat;
  background-size:100% 100%;
  margin-top: 0;
  display: flex;
  align-items:center;
  justify-content: center;
}
.el-card {
  opacity: 0.7;
  border: 1px solid #DCDFE6;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 30px #DCDFE6;
  background-color: #ffffff;
  width: 450px;
  height: 300px;
}

.el-card:hover {
  opacity: 0.9
}
</style>